<template>
	<div id="about">
		<!-- <div class="about-top" > -->
			<!-- <img src="../common/image/gywm_banner@1x.png" alt=""> -->
		<!-- </div> -->
		<div class="bg bg1">
			<div :class="imageHuaDong1?'imageHuaDong':''">
				<img src="@/common/image/gywm_bg1_1@1x.png" alt="">
			</div>
			<div class="textImage" :class="imageHuaDong1?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_jys@1x.png" alt="">
			</div>
		</div>
		<div class="bg bg2">
			<div class="textImage" :class="imageHuaDong2?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_jyzbr@1x.png" alt="">
			</div>
			<div :class="imageHuaDong2?'imageHuaDong':''">
				<img src="@/common/image/gywm_bg2_2@1x.png" alt="">
			</div>
		</div>
		<div class="bg bg3">
			<div :class="imageHuaDong3?'imageHuaDong':''" ref="scrollone">
				<img src="@/common/image/gywm_bg3_3@1x.png" alt="">
			</div>
			<div class="textImage" :class="imageHuaDong3?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_rzdv@1x.png" alt="">
			</div>
		</div>
		<div class="bg bg4">
			<div class="textImage" :class="imageHuaDong4?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_yqr@1x.png" alt="">
			</div>
			<div :class="imageHuaDong4?'imageHuaDong':''">
				<img src="@/common/image/gywm_bg4_4@1x.png" alt="">
			</div>
		</div>
		<div class="bg bg5">
			<div :class="imageHuaDong5?'imageHuaDong':''">
				<img src="@/common/image/gywm_bg5_5@1x.png" alt="">
			</div>
			<div class="textImage" style="margin-top: 30px;" :class="imageHuaDong5?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_xgdl@1x.png" alt="">
			</div>

		</div>
		<div class="bg bg6">
			<div class="textImage" :class="imageHuaDong6?'textImages':''">
				<img class="textImage" src="@/common/image/gywm_zdz@1x.png" alt="">
			</div>
			<div :class="imageHuaDong6?'imageHuaDong':''">
				<img src="@/common/image/gywm_bg6_6@1x.png" alt="">
			</div>
		</div>
		<footerPage />
	</div>
</template>
<script>
	import footerPage from '../components/footer'
	export default {
		data() {
			return {
				imageHuaDong1: true,
				imageHuaDong2: false,
				imageHuaDong3: false,
				imageHuaDong4: false,
				imageHuaDong5: false,
				imageHuaDong6: false
			};
		},
		mounted() {
			this.$nextTick(() => {
				window.addEventListener("scroll", this.handleScroll);
			})
		},
		methods: {
			handleScroll() {
				//获取滚动时的高度
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				// if (scrollTop >= 0) {
				// 	this.imageHuaDong1 = true
				// }
				if (scrollTop >= 600) {
					this.imageHuaDong2 = true
				}
				if (scrollTop >= 1350) {
					this.imageHuaDong3 = true
				}
				if (scrollTop >= 2100) {
					this.imageHuaDong4 = true
				}
				if (scrollTop >= 2800) {
					this.imageHuaDong5 = true
				}
				if (scrollTop >= 3750) {
					this.imageHuaDong6 = true
				}
			},
		},
		components: {
			footerPage,
		}
	};
</script>
<style lang="less">
	// .textImage{
	// 	opacity: 0;
	// }
	@-webkit-keyframes fadeInOut {
		0% {
			opacity: 0.25;
		}
		25% {
			opacity: 0.25;
		}
		75% {
			opacity: 0.75;
		}
		100%{
			opacity: 1 ;
		}
	}
	.textImages{
		-webkit-animation-name: fadeInOut;
		-webkit-animation-timing-function: ease-in-out;
		// -webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-webkit-animation-fill-mode:forwards;
		-webkit-animation-duration: 3s;
	}

	.imageHuaDong {
		margin-top: -100px;
		transition: margin-top 2s ease
	}
	.bg3{
		.textImage{
			margin-top: 0px !important;
		}
	}
	.bg4{
		padding-top:18.75% !important;
	}
	#about {
		.textImage {
			min-width: 240px;
			margin-top: 10px;
		}
		// widows: 100%;
		width: 100% !important;
		.bg{
			display: flex;
			width: 100% !important;
			background-size: cover;
			padding: 20vh 20vw;
			justify-content: space-between;
			background: red;
			.title-line {
				width: 40px;
				height: 8px;
				border-radius: 4px;
				background: red;
			}

			.title {
				font-size: 30px;
			}

			p {
				font-size: 24px;
			}

			.text {
				font-size: 24px;
				color: #454F7A;
			}
		}

		.bg:nth-child(even) {
			>.bgBox {
				width: 285px;
				margin-left: auto;
			}
		}

		.bg:nth-child(odd) {
			text-align: left;
		}

		.bg1 {
			height: 682px;
			background: url(../common/image/gywm_bg1@1x.png) no-repeat;
		}

		.bg2 {
			height: 765px;
			background: url(../common/image/gywm_bg2@1x.png) no-repeat;
			color: #FFFFFF;
		}

		.bg3 {
			height: 766px;
			background: url(../common/image/gywm_bg3@1x.png) no-repeat;
			color: #FFFFFF;
		}

		.bg4 {
			height: 860px;
			background: url(../common/image/gywm_bg4@1x.png) no-repeat;
		}

		.bg5 {
			height: 860px;
			background: url(../common/image/gywm_bg5@1x.png) no-repeat;
		}

		.bg6 {
			height: 900px;
			padding-top: 300px;
			background: url(../common/image/gywm_bg6@1x.png) no-repeat;
			margin-top: -1px;
		}
	}

	.about-top {
		width: 100% !important;
		height: 600px;
		// background:url(../common/image/gywm_banner@1x.png) no-repeat;
		background-size: cover;
		>img{
			margin: 0 auto;
			width: 100%;
		}
	}
</style>
